<template>
  <div>
    <el-tabs
      v-model="tabName"
      class="data three demo-tabs"
      @tab-change="handleChangeTag"
      type="card"
      stretch
    >
      <el-tab-pane label="配 镜" name="1"></el-tab-pane>
      <el-tab-pane label="视 训" name="2"></el-tab-pane>
      <el-tab-pane label="其 他" name="3"></el-tab-pane>
    </el-tabs>

    <el-scrollbar
      style="height: calc(100vh - 12rem)"
      :style="{
        height: 'calc(100vh - ' + props.heightNum + 'rem)',
      }"
    >
      <Optical
        v-show="tabName == 1"
        @handleRefreshData="handleRefreshData"
        :checklistId="props.checkId"
      />
      <VisualTraining v-if="tabName == 2" />
      <Other v-show="tabName == 3" @handleRefreshData="handleRefreshData" />
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";
import { watchStorage, setStorageWithEvent } from "@/utils/GlobalMonitoring.js";
import Optical from "./component/Optical.vue";
import VisualTraining from "./component/VisualTraining.vue";
import Other from "./component/Other.vue";
import { handleApiResponse } from "@/utils/request.js";
import {
  QueryGlassesInfo,
  CreateGlassesInfo,
} from "../../../../../../wailsjs/go/api/ReportApi";

onMounted(() => {
  getDetail();
});

const props = defineProps({
  heightNum: {
    type: Number,
    default: 12,
  },
  checkId: {
    type: Number,
    default: -1,
  },
});
const userStore = useUserStore();
const { tabName, checkDetailForm } = storeToRefs(userStore);

const handleChangeTag = () => {};

const dataForm = ref({});
async function getDetail() {
  handleApiResponse(() =>
    QueryGlassesInfo({
      id: props.checkId == -1 ? checkDetailForm.value.id : props.checkId,
    })
  ).then((res) => {
    if (res.code == 0) {
      // console.log(res);
      dataForm.value = res.data || {};

      setStorageWithEvent("scheme_data", res.data);
    }
  });
}

// 刷新数据
const handleRefreshData = () => {
  getDetail();
};

defineExpose({
  handleRefreshData,
});
</script>

<style scoped lang="scss">
.demo-tabs :deep(.el-tabs__header) {
  @apply mb-0;
}
.demo-tabs :deep(.el-tabs__item.is-top.is-active) {
  color: white !important;
  background-color: var(--theme-color) !important;
}
.demo-tabs :deep(.el-tabs__item.is-top) {
  background-color: #c9d6df !important;
  @apply font-bold;
}
</style>